import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  TabController? _tabController;
  static const sizeList = ['Y3', 'Y4', 'Y5'];
  TextEditingController? _editingController;
  late FocusNode _focusNode;
  bool _focused = true;

  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    _editingController = TextEditingController();
    _focusNode = FocusNode();
    _focusNode.addListener(_handleFocusChange);
    super.initState();
  }

  @override
  void dispose() {
    _focusNode.removeListener(_handleFocusChange);
    super.dispose();
  }

  void _handleFocusChange() {
    debugPrint('35=============');
    setState(() => _focused = _focusNode.hasFocus);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Compact TextField',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Compact TextField')),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 110,
                child: TabBar(
                  tabs: <Widget>[
                    _buildTab('男西服', 1),
                    _buildTab('男西裤', 1),
                  ],
                  controller: _tabController,
                  indicatorSize: TabBarIndicatorSize.tab,
                  tabAlignment: TabAlignment.fill,
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: const <Widget>[
                    Text('男西服'),
                    Text('男西裤'),
                  ],
                  controller: _tabController,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTab(String category, int quantity) {
    return Tab(
      height: 110,
      child: Container(
        // decoration: const BoxDecoration(color: Colors.amber),
        height: 110,
        child: Column(
          children: <Widget>[
            Text(
              category,
              style: const TextStyle(fontSize: 16.0),
            ),
            TextField(
              controller: _editingController,
              focusNode: _focusNode,
              decoration: InputDecoration(
                hintText: '版型',
                isCollapsed: true,
                isDense: true,
                border: (_focused || _editingController!.text.isEmpty)
                    ? const UnderlineInputBorder()
                    : InputBorder.none,
              ),
              keyboardType: TextInputType.text,
              textAlign: TextAlign.center,
              onEditingComplete: () {
                debugPrint('87=======');
              },
            ),
            Padding(
              padding: const EdgeInsets.only(top: 5.0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: DropdownMenu<String>(
                      width: 80,
                      inputDecorationTheme: const InputDecorationTheme(
                        isDense: true,
                        contentPadding: EdgeInsets.symmetric(vertical: 1.0),
                        isCollapsed: true,
                        constraints: BoxConstraints(maxHeight: 36.0),
                      ),
                      initialSelection: sizeList.first,
                      dropdownMenuEntries: sizeList
                          .map((e) => DropdownMenuEntry<String>(value: e, label: e))
                          .toList(),
                    ),
                  ),
                  const Padding(padding: EdgeInsets.symmetric(horizontal: 10.0)),
                  Expanded(
                    flex: 1,
                    child: Text(
                      quantity.toString(),
                      style: const TextStyle(fontSize: 16),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
